        <template>
        <div>
        <div style="background-color:white;height:60px">
        <div style="background-color:pink;height:0.1px;width:100%; position: relative;top:55px"></div>
        <p style="font-size:17px; color:gray;">课程列表</p>
        </div>
        
        <el-table :data="tableData" style="width: 100%;">
        <el-table-column label="序号" width="180" >
        <template #default="scope">
        <i class="el-icon-time"></i>
        <span style="margin-left: 10px">{{ scope.row.id }}</span>
        </template>
        </el-table-column>
        <el-table-column label="课程名称" width="180" >

        <template #default="scope">
        <i class="el-icon-time"></i>
        <span style="margin-left: 10px">{{ scope.row.name }}</span>
        </template>
        </el-table-column>
        <el-table-column label="创建时间" width="180" >
        <template #default="scope"> <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{ scope.row.date }}</span>
                </template>

                </el-table-column>
                    <el-table-column label="可见状态" width="180" > 
                <template v-slot="scope">
                <el-switch
                v-model="scope.row.status" @click="open"/>
                </template>
                </el-table-column>
                <el-table-column label="操作" width="0" > 
                    <el-button><el-icon><edit-pen /></el-icon></el-button>
                    <el-button><el-icon><files /></el-icon></el-button>
                <el-button><el-icon><monitor /></el-icon></el-button>
                <el-button><el-icon><school /></el-icon></el-button>
                </el-table-column>
                </el-table>
                </div>
                </template>

                <script>
                import {EditPen,Files,Monitor,School} from '@element-plus/icons-vue'
                import { ElMessage } from 'element-plus'
                export default {
                components: {EditPen,Files,Monitor,School, },
                data() {
        return {
     open(){
             ElMessage({
                  message: '恭喜你，这是一条成功消息',
                  type: 'success',
})
},
                tableData: [{id: '1',name: 'Java程序设计',date: '2020-12-12',status:1,},
                {id: '2',name: 'MySQL数据库技术',date: '2021-12-11',status:0,},
                {id: '3',name: 'Web前端开发基础',date: '2021-12-11',status:1,},
                {id: '4',name: 'web前端开发实战',date: '2021-12-11',status:0,},],
                }
                },
                methods: {pd(){}},
                 }
        </script>